<template>
  <a-spin :spinning="loading">
    <div class="modal-header">
      <div class="modal-title">
        {{ !id ? l('CreateNewEdition') : l('EditEdition') }}
      </div>
    </div>
    <slot></slot>
    <div class="modal-body">
      <a-form :form="form" @submit="save()" autocomplete="off" :rules="rules">
        <a-tabs defaultActiveKey="1">
          <a-tab-pane :tab="l('EditionProperties')" key="1">
            <a-form-item :label="l('EditionName')" name="displayName">
              <a-input v-model:value="form.displayName" type="text" />
            </a-form-item>
          </a-tab-pane>
          <a-tab-pane :tab="l('Features')" key="2" forceRender="true">
            <div v-if="editData && editData.features">
              <edition-feature-tree :editData="editData" ref="featureTree"></edition-feature-tree>
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </div>
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" type="button">
        <close-circle-outlined />
        {{ l('Cancel') }}
      </a-button>
      <a-button :loading="saving" :type="'primary'" @click="handleSubmit()">
        <save-outlined />
        {{ l('Save') }}
      </a-button>
      <a-button :loading="saving" :type="'primary'" @click="handleSubmit(false)">
        <save-outlined />
        {{ l('SaveDoesNotExit') }}
      </a-button>
    </div>
  </a-spin>
</template>
<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { EditionFeatureTree } from '/@/app/admin-shared';
  import { AppEditionExpireAction } from '/@/abpPro/AppEnums';
  import {
    CommonLookupServiceProxy,
    CreateOrUpdateEditionDto,
    EditionEditDto,
    EditionServiceProxy,
    GetEditionEditOutput,
  } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'create-or-edit-edition',
    components: { EditionFeatureTree },
    mixins: [ModalComponentBase],
    props: {
      pageDataList: {
        type: Array,
        required: true,
      },
    },
    data() {
      return {
        id: '',
        form: {
          displayName: '',
        },
        rules: {
          displayName: [
            {
              max: 32,
              message: this.l('MaxLength', 32),
              trigg: 'blur',
            },
          ],
        },
        editionService: new EditionServiceProxy(),
        commonLookupService: new CommonLookupServiceProxy(),
        editData: new GetEditionEditOutput(),
        edition: new EditionEditDto(),
        expiringEditions: [] as any,
        expireAction: undefined,
        expireActionEnum: AppEditionExpireAction,
        isFree: true,
        isTrialActive: false,
        isWaitingDayActive: false,
      };
    },
    computed: {
      featureTree() {
        return this.$refs.featureTree;
      },
    },
    mounted() {
      this.id = this.pageDataList[0];
      this.getPageData(this.id);
    },
    methods: {
      getPageData(id) {
        this.Init(id);
      },
      handleClose() {},
      Init(editionId) {
        this.loading = true;
        this.commonLookupService
          .getEditionsForCombobox(true)
          .then((editionsResult) => {
            this.expiringEditions = editionsResult.items!;
            this.editionService.getEditionForEdit(editionId).then((editionResult) => {
              this.edition = editionResult.edition;
              this.editData = editionResult;
              this.form.displayName = this.edition.displayName;
              this.expireAction !=
              (this.edition.expiringEditionId ? this.edition.expiringEditionId : 0) > 0
                ? AppEditionExpireAction.AssignToAnotherEdition
                : AppEditionExpireAction.DeactiveTenant;

              this.isFree =
                !editionResult.edition.monthlyPrice && !editionResult.edition.annualPrice
                  ? true
                  : false;
              this.isTrialActive =
                (editionResult.edition.trialDayCount ? editionResult.edition.trialDayCount : 0) > 0;
              this.isWaitingDayActive =
                (editionResult.edition.waitingDayAfterExpire
                  ? editionResult.edition.waitingDayAfterExpire
                  : 0) > 0;
            });
          })
          .finally(() => {
            this.loading = false;
          });
      },
      updateAnnualPrice(value) {
        this.edition.annualPrice = value;
      },

      updateMonthlyPrice(value) {
        this.edition.monthlyPrice = value;
      },

      resetPrices() {
        this.edition.annualPrice = undefined;
        this.edition.monthlyPrice = undefined;
      },

      removeExpiringEdition() {
        this.edition.expiringEditionId = undefined;
      },

      handleSubmit(closeFlag = true) {
        this.edition.displayName = this.form.displayName;
        const input = new CreateOrUpdateEditionDto();
        input.edition = this.edition;
        input.featureValues = (this.$refs.featureTree as any).getGrantedFeatures();
        this.saving = true;
        this.editionService
          .createOrUpdateEdition(input)
          .finally(() => {
            this.saving = false;
          })
          .then(() => {
            this.notify.success(this.l('SavedSuccessfully'));
            if (closeFlag) {
              this.success();
            } else {
              this.saveNotClose();
            }
          });
      },
    },
  });
</script>
